<template>
	<view class="container">
		<view class="user-section">
			<view class="vip-card-box">
				<text class="text">开通铂金会员 终身享受<text>9</text>大权益</text>
				<text class="c01">自购节省更多 赚钱也更容易</text>
			</view>
		</view>
		<view class="info">
			<view class="list">
				<view class="a01">
					<view v-for="(item,index) in houses" :key="index" class="item">
						<image :src="imgsrc + item.pic"></image>
						<text class="text">{{item.title }}</text>
						<text>{{item.title_small}}</text>
					</view>
					<!-- <view class="item">
						<image src="/static/img/user/icon_dlsj.png"></image>
						<text class="text">代理商家</text>
						<text>返利更多</text>
					</view>
					<view class="item">
						<image src="/static/img/user/icon_sbff.png"></image>
						<text class="text">双倍福分</text>
						<text>购物赠送</text>
					</view>
					<view class="item">
						<image src="/static/img/user/icon_zxdj.png"></image>
						<text class="text">个人海报</text>
						<text>邀请更多好友</text>
					</view>
					<view class="item">
						<image src="/static/img/user/icon_dlsj.png"></image>
						<text class="text">每月100元</text>
						<text>全品类券</text>
					</view>
					<view class="item">
						<image src="/static/img/user/icon_sbff.png"></image>
						<text class="text">每月20元</text>
						<text>邮费低用券</text>
					</view>
					<view class="item">
						<image src="/static/img/user/icon_txed.png"></image>
						<text class="text">提现额度</text>
						<text>可大额提现</text>
					</view>
					<view class="item">
						<image src="/static/img/user/icon_ncgg.png"></image>
						<text class="text">昵称更改</text>
						<text>随时更改昵称</text>
					</view>
					<view class="item">
						<image src="/static/img/user/icon_zskf.png"></image>
						<text class="text">专属客服</text>
						<text>7x24小时服务</text>
					</view> -->
					<!-- <view class="item">
						<image src="/static/img/user/icon_zxdj.png"></image>
						<text class="text">我的用户</text>
					</view> -->
				</view>
				<view class="a02">
					<text class="text">开通立即赠送以下物品，免邮到你家</text>
					<view class="free_product">
						<view class="free_product_image">
							<image :src="image?imgsrc + image : ''" @tap="toGoods()"></image>
						</view>
						<view class="free_product_content">
							<text>{{describe}}</text>
							<text class="price">售价:￥{{product_price}}</text>
						</view>
					</view>
				</view>
				<view class="a03">
					<view class="btn-list">
						<button class="btn active" @click="toConfirmation()">立即开通￥{{price}}</button>
						<button class="btn" plain="true" @tap="toFree">免费开通</button>
					</view>
					<view class="text">点击开通代表阅读并同意<span @tap="doProtocol('https://download.dfkjt.com/memberRegistrationAgreement.txt', '牧耘郎会员服务协议')">《牧耘郎会员服务协议》</span></view>
				</view>
				<!-- 会员推荐暂时屏蔽 -->
				<!-- <view class="a04">
					<view class="title">
						<view class="text">会员推荐</view>
					</view>
					<view class="box">
						<view class="item">
							<view class="img">
								<image src="/static/img/goods/yumi.png"></image>
							</view>
							<view class="content">
								<view class="title clamp">云南甜玉米 水果玉米水果玉米水果玉米</view>
								<view class="text">规格：500g/盒</view>
								<view class="price">
									<span class="icon">￥</span>
									<span class="sale">18</span>
									<span class="slogan">￥28</span>
								</view>
							</view>

						</view>
						<view class="item">
							<view class="img">
								<image src="/static/img/goods/yumi.png"></image>
							</view>
							<view class="content">
								<view class="title clamp">云南甜玉米 水果玉米 砝码</view>
								<view class="text">规格：500g/盒</view>
								<view class="price">
									<span class="icon">￥</span>
									<span class="sale">18</span>
									<span class="slogan">￥28</span>
								</view>
							</view>

						</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import Api from '@/common/api';

	export default {
		data() {
			return {
				imgsrc: Api.imgsrc,
				skus: [],
				sellerid: '',
				image: null,
				houses: [],
				items: '',
				describe: '',
				price: '',
				product_price: '',
				product_id: ''

			};
		},
		onLoad() {
			this.loadData()
		},
		computed: {
			...mapState(['hasLogin'])

		},
		methods: {
			async loadData() {
				var params = {

				};
				let data = await Api.apiCall('post', Api.vip.center, params);
				this.houses = data.house
				this.image = data.image // 返回产品列表，目前只选择一个
				this.items = data.items
				this.price = data.price
				this.product_price = data.product_price
				this.product_id = data.product_id
				this.describe = data.describe
			},
			doProtocol(url,title) {
				if(!url){
					uni.showToast({
						title: '还未上传相关协议',
						icon: "none"
					});
					return;
				}
				uni.navigateTo({
					url:`/pages/public/protocol?url=${url}&title=${title}`
				})
				
			},
			
			//跳转确认订单页面
			async toConfirmation() {
				console.log(this.hasLogin)
				if (!this.hasLogin) {
					console.log('***未登录***');
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return false;
				}
				var params = {
					'items': this.items, // 商品结算SkuID和数量
					'address_id': 1, // 先不用填写收货地址
					'coupon_id': 0,
					'remark': '订单测试',
					'type': 3 // type 1为购物车创建订单， 2立即下单  3,购买会员 4.代理商购买

				}
				//商品列表
				let data = await Api.apiCall('post', Api.order.addOrder, params);
				if (data) {
					uni.removeStorage({
						key: 'buylist'
					})
					let url = `/pages/money/pay?id=${data.id}&type=3`;
					uni.redirectTo({
						url: url
					})
				}
			},
			toFree() {
				var url = '/member/memberFree';
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url: url
				})
			},
			toGoods(e) {
				uni.navigateTo({
					url: '/mall/product/product_detail?product_id=' + this.product_id
				});
			},
		},

	}
</script>

<style lang="scss">
	page {
		// background-color: #FAFAFA;
	}
	.container{
		background-image: linear-gradient(to bottom, #232323, #232323 25%, #FAFAFA, #FAFAFA 75%);
	}

	.user-section {
		width: 100%;
		// height: 500upx;
		padding: 24upx 30upx 30upx 30upx;
		// background-color: #232323;

		.vip-card-box {
			width: 100%;
			height: 120upx;
			background-color: #F9E2A2;
			color: #232323;
			display: flex;
			flex-direction: column;
			font-size: 24upx;
			border-radius: 20upx;
			justify-content: center;
			align-items: center;

			.text {
				font-size: 36upx;
				font-weight: 600;
				margin-top: -16upx;

				text {
					color: #E52631;
					padding: 0 8upx;
					font-size: 56upx;
				}
			}
		}

	}

	.info {
		width: 100%;
		// height: 1400upx;
		padding: 0 30upx 30upx 30upx;
		// margin-top: -332upx;
		// margin-bottom: 30upx; //屏蔽会员推荐模块新增的样式 

		.list {
			width: 100%;
			// height: 1400upx;
			border-radius: 20upx;
			// border: 1upx solid red;
			box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
			background-color: #fff;
			z-index: 100;

			.a01 {
				height: 724upx;
				padding-top: 20upx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-wrap: wrap;
				border-bottom: 1upx solid #EFF2F4;

				.item {
					width: 33%;
					margin: 20upx 0 40upx;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: $font-sm - 2upx;
					color: #ABADAD;

					.text {
						font-size: $font-sm + 4upx;
						color: #757677;
					}

				}

				image {
					width: 82upx;
					height: 82upx;
					margin-bottom: 16upx;
				}
			}

			.a02 {
				width: 100%;
				height: 384upx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.text {
					padding: 30upx 0 26upx;
					color: #232323;
					font-size: $font-sm + 8upx;
				}

				.free_product {
					display: flex;
					flex-flow: row nowrap;
					align-items: center;
					box-sizing: border-box;
					width: 480upx;
					padding: 12upx;
					border-radius: 10upx;
					box-shadow: 0 2upx 7upx rgba(225, 228, 229, 0.5);

					.free_product_image {
						width: 220upx;
						height: 220upx;
						border-radius: 10upx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.free_product_content {
						display: flex;
						flex-flow: column wrap;
						justify-content: center;
						align-items: flex-start;
						font-size: 32upx;
						color: rgba(35, 35, 35, 1);
						margin-left: 23upx;

						.price {
							color: rgba(171, 173, 173, 1);
							text-decoration:line-through ;
						}
					}
				}
			}

			.a03 {
				// width: 100%;
				padding: 8upx 65upx 40upx;
				// height: 290upx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				
				.btn-list{
					display: flex;
					flex-flow: row nowrap;
					justify-content: space-between;
					margin: 40upx 0;
					.btn {
						flex: 1;
						// width: 560upx;
						// width: 300upx;
						// height: 88upx;
						height: 70upx;
						font-size: 28upx;
						margin-bottom: 20upx;
						// border-radius: 44upx;
						border-radius: 35upx;
						display: flex;
						justify-content: center;
						align-items: center;
						border: .5upx solid #A4A7A5;
					}
					
					.active {
						flex: 0 0 350upx;
						margin-right: 20upx;
						border: 0;
						background-color: #F9E2A2;
						color: #FFF;
					}
				}
				
				.text {
					color: #757777;
					font-size: $font-sm;

					span {
						color: #FFBC21;
						text-decoration: underline;
					}
				}
			}

			.a04 {
				width: 100%;
				padding-bottom: 20upx;

				.title {
					width: 100%;
					font-size: 32upx;
					height: 88upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-weight: 600;
				}

				.box {
					width: 100%;
					display: flex;
					margin-bottom: 20upx;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;

					.item {
						width: 330upx;
						height: 500upx;
						display: flex;
						flex-direction: column;
						border-radius: 20upx;
						background-color: #fff;
						box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);

						.img {
							width: 330upx;
							height: 330upx;
							border-radius: 10upx;
							overflow: hidden;
							flex-shrink: 0;

							image {
								width: 330upx;
								height: 330upx;
							}
						}

						.content {
							flex: 1;
							display: flex;
							flex-direction: column;
							padding: 0 20upx;
							overflow: hidden;

							.title {
								height: 48upx;
								margin-top: 20upx;
								font-size: 28upx;
								font-weight: 600;
								color: #232323;
								line-height: 1;
								align-items: center;
								overflow: hidden;
								// white-space: nowrap;
								text-overflow: ellipsis;
								display: block;
							}

							.text {
								color: #ABADAD;
								font-size: 24upx;
							}

							.price {
								color: #e65339;
								font-size: 36upx;
								font-weight: 600;
								align-items: flex-end;

								.icon {
									font-size: 24upx;
									color: #E52732;
									padding-right: 10upx;
								}

								.sale {
									align-items: baseline;
									margin-left: -14upx;
									margin-bottom: -6upx;
								}

								.slogan {
									color: #807c87;
									margin-left: 20upx;
									font-size: 24upx;
									text-decoration: line-through;
								}
							}

						}


					}
				}
			}
		}

	}
</style>
